<template>
    <el-row :gutter="20">
        <el-col :span="18" class="contract">
            <el-form ref="ruleFormRef" :model="ruleForm" >
                <el-descriptions border :column="2">
                    <el-descriptions-item :span=2>
                        <template #label>
                            <div class="cell-item" style="width: 20px;">　　　　　</div>
                        </template>
                        <el-descriptions border :column="2">
                            <el-descriptions-item label="项目名称　　　　　" :span="2"><div style="width: 600px;" ><el-text>{{ Project.title }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="合同总金额　　　　"><el-input-number style="width: 240px;" :precision="2" v-model="ruleForm.price" :min="1" @change="onPrice" /></el-descriptions-item>
                            <el-descriptions-item label="类型　　　　　　　">
                                <el-select v-model="ruleForm.contract_type" style="width: 240px;" placeholder="请选择" @change="onSelectSource">
                                    <el-option label="请选择" value="" />
                                    <el-option label="材料供应" :value="1" />
                                    <el-option label="双包" :value="3" />
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="税率　　　　　　　">
                                <el-select style="width: 240px;" v-model="ruleForm.tax_rate" placeholder="请选择" @change="onTax">
                                    <el-option label="请选择" value="" />
                                    <el-option label="1%" :value="1" />
                                    <el-option label="3%" :value="3" />
                                    <el-option label="6%" :value="6" />
                                    <el-option label="9%" :value="9" />
                                    <el-option label="13%" :value="13" />
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="税金　　　　　　　"><div style="width: 240px;"><el-text>{{  ruleForm.tax_price}}</el-text></div></el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>


                    <el-descriptions-item :span="2">
                        <template #label>
                            <div class="cell-item" style="width: 20px;">购买方信息</div>
                        </template>
                        <el-descriptions border :column="2">
                            <el-descriptions-item label="单位名称　　　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.name }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="纳税人识别号　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.tax_id }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="地址　　　　　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.address }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="电话　　　　　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.mobile }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="开户银行　　　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.bank }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="开户行号　　　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.bank_number }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="银行账号　　　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.bank_account }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="邮箱　　　　　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.email }}</el-text></div></el-descriptions-item>
                            <el-descriptions-item label="邮政编码　　　　　"><div style="width: 240px;" ><el-text>{{ ruleForm.postal_code }}</el-text></div></el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>

                    <el-descriptions-item :span="2">
                        <template #label>
                            <div class="cell-item" style="width: 20px;">销售方信息</div>
                        </template>
                        <el-descriptions border :column="2">
                            <el-descriptions-item label="单位名称　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_name"  /></div></el-descriptions-item>
                            <el-descriptions-item label="纳税人识别号　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_tax_id"  /></div></el-descriptions-item>
                            <el-descriptions-item label="地址　　　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_address"  /></div></el-descriptions-item>
                            <el-descriptions-item label="电话　　　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_mobile"  /></div></el-descriptions-item>
                            <el-descriptions-item label="开户银行　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_bank"  /></div></el-descriptions-item>
                            <el-descriptions-item label="开户行号　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_bank_number"  /></div></el-descriptions-item>
                            <el-descriptions-item label="银行账号　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_bank_account"  /></div></el-descriptions-item>
                            <el-descriptions-item label="邮箱　　　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_email"  /></div></el-descriptions-item>
                            <el-descriptions-item label="邮政编码　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_postal_code"  /></div></el-descriptions-item>
                            <el-descriptions-item label="上传公司营业执照　">
                                <el-button type="primary"  @click="onUploadFile('b_business_file')"> 上传 </el-button>
                                <el-button :type="ruleForm.b_business_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.b_business_file)"> 查看 </el-button>
                            </el-descriptions-item>
                            <el-descriptions-item label="上传法人身份证　　">
                                <el-button type="primary"  @click="onUploadFile('b_idcard_file')"> 上传 </el-button>
                                <el-button :type="ruleForm.b_idcard_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.b_idcard_file)"> 查看 </el-button>
                            </el-descriptions-item>
                            <el-descriptions-item label="企业法人　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_legal"  /></div></el-descriptions-item>
                            <el-descriptions-item label="企业法人联系电话　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_legal_mobile"  /></div></el-descriptions-item>
                            <el-descriptions-item label="代理人　　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_agent"  /></div></el-descriptions-item>
                            <el-descriptions-item label="代理人联系电话　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.b_agent_mobile"  /></div></el-descriptions-item>
                            <el-descriptions-item label="上传委托代理授权书">
                                <el-button type="primary"  @click="onUploadFile('b_authorize_file')"> 上传 </el-button>
                                <el-button :type="ruleForm.b_authorize_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.b_authorize_file)"> 查看 </el-button>
                            </el-descriptions-item>
                            <el-descriptions-item label="上传代理人身份证　">
                                <el-button type="primary"  @click="onUploadFile('b_agent_idcard_file')"> 上传 </el-button>
                                <el-button :type="ruleForm.b_agent_idcard_file ? 'primary' : 'info'"  @click="onShowFile(ruleForm.b_agent_idcard_file)"> 查看 </el-button>
                            </el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>

                    <el-descriptions-item :span=2>
                        <template #label>
                            <div class="cell-item" style="width: 20px;">　　　　　</div>
                        </template>
                        <el-descriptions border :column="2">
                            <el-descriptions-item label="交付地点　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.deliver_address"  /></div></el-descriptions-item>
                            <el-descriptions-item label="签收人　　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.receiver"  /></div></el-descriptions-item>
                            <el-descriptions-item label="材料数量　　　　　">
                                <div style="width: 240px;" >
                                    <el-input-number style="width: 240px;" :precision="2" size="small" v-model="ruleForm.sums" :min="1" />
                                </div>
                            </el-descriptions-item>
                            <el-descriptions-item label="数量单位　　　　　">
                                <div style="width: 240px;" >
                                    <el-input size="small" v-model="ruleForm.unit"  />
                                </div>
                            </el-descriptions-item>
                            <el-descriptions-item label="材料单价　　　　　">
                                <el-input-number style="width: 240px;" :precision="2" size="small" v-model="ruleForm.unit_price" :min="1" />
                            </el-descriptions-item>
                            <el-descriptions-item label="付款方式　　　　　">
                                <el-select size="small" v-model="ruleForm.pay_type" style="width: 240px;">
                                    <el-option label="对公转账" value="对公转账" />
                                    <el-option label="对私转账" value="对私转账" />
                                    <el-option label="数字人民币" value="数字人民币" />
                                    <el-option label="电子货币" value="电子货币" />
                                    <el-option label="现金支票" value="现金支票" />
                                    <el-option label="其它" value="其它" />
                                </el-select>
                            </el-descriptions-item>
                            <el-descriptions-item label="违约金　　　　　　">
                                <el-input-number style="width: 240px;" :precision="2" size="small" v-model="ruleForm.liquidated_damages" :min="1" />
                            </el-descriptions-item>
                            <el-descriptions-item label="品种要求　　　　　"><div style="width: 240px;" ><el-input size="small" v-model="ruleForm.variety"  /></div></el-descriptions-item>
                            <el-descriptions-item label="上传合同扫描件　　">
                                <el-button type="primary"  @click="onUploadFile('contract_canned')"> 上传 </el-button>
                                <el-button :type="ruleForm.contract_canned ? 'primary' : 'info'"  @click="onShowFile(ruleForm.contract_canned)"> 查看 </el-button>
                            </el-descriptions-item>
                            <el-descriptions-item label="备注　　　　　　　" :span="2"><el-input size="small" v-model="ruleForm.remarks" :rows="4" type="textarea" :autosize="{ minRows: 4 }" /></el-descriptions-item>
                        </el-descriptions>
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>
        </el-col>
    </el-row>
        
    <div class="text-center mt30">
        <el-button type="primary" @click="submitForm(ruleFormRef)" :loading="loading"> 保存 </el-button>
        <el-button type="info" @click="router.go(-1)"> 返回 </el-button>
        <component :is="applyButton" model = "MaterialContract" :source = "source" type = "apply" :id = id />
        <component :is="applyRevoke" model = "MaterialContract" :source = "source" :id = id />
        <!-- <el-button @click="printElement"> 打印预览 </el-button> -->
    </div>

    <el-dialog v-model="showUpload" title="文件">
        <component :is="uploadFile" :data="uploadData" @saveUpload="saveUpload" />
    </el-dialog>

    <el-dialog v-model="isShowFile" title="文件" class="m0" width="80%" @close="onCloseFile" draggable>
        <component :is="showFile" :data="files"/>
    </el-dialog>

    <el-dialog v-model="isPrint" title="打印预览" width="900px">
        <component :is="materialContractForm" :data = id :type="true"/>
    </el-dialog>
</template>
  
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import http from '../../../util/request';
import { ElMessage, FormInstance } from 'element-plus';
import uploadFile from '@/components/uploadFile.vue'
import showFile from '@/components/showFile.vue'
import router from '../../../router';
import applyButton from "@/components/applyButton.vue";
import applyRevoke from "@/components/applyRevoke.vue";
import materialContractForm from "@/components/materialContractForm.vue";
const isPrint = ref<boolean>(false)
const showUpload = ref<boolean>(false)
let uploadData:any = ref({prefix:'material/',type:''})
const isShowFile = ref<boolean>(false)
const files = ref('')

const source = ref('MaterialContract')

const loading = ref<boolean>(false)
const ruleFormRef = ref<FormInstance>()
const id:any = ref(useRouter().currentRoute.value.params.id)
interface Project {
    id: number
    title: string
}
const Project = ref<Project>({id:0,title:''})
let data:any = sessionStorage.getItem('project')
Project.value = JSON.parse(data);
let user:any = sessionStorage.getItem('user')
user = JSON.parse(user)

const ruleForm = ref<any>({})

const submitForm = async (formEl: FormInstance | undefined) => {
    console.log(ruleForm.value)
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            loading.value = true
            let request:any = null
            if(ruleForm.value.id){
                request = http.patch('/material/contract',ruleForm.value)
            }else{
                ruleForm.value.material_id = id.value
                request = http.put('/material/contract',ruleForm.value)
            }
            request.then((response:any)=>{
                loading.value = false
                if(response.data.code != 200){
                    ElMessage.error(response.data.msg);
                    return
                }
                ElMessage.success(response.data.msg);
                id.value = response.data.data.id
                getData()
            })
        } else {
            console.log('error submit!', fields)
        }
    })
}

const onSelectSource = (data:any) => {
    //判断类型
    if(data == 1){
        source.value = 'MaterialContract'
    }
    if(data == 2){
        source.value = 'MaterialContractSmall'
    }
    if(data == 3){
        source.value = 'MaterialContractDouble'
    }
}

const getData = () => {
    if(id.value == 0){
        return;
    }
    http.get('/materialContract/'+id.value).then((response:any)=>{
        if(response.data.data){
            ruleForm.value = response.data.data
            ruleForm.value.price = parseInt(ruleForm.value.price)
        }
    })
}

const onPrice = () => {
    ruleForm.value.tax_price = (parseInt(ruleForm.value.tax_rate) / 100 *  parseInt(ruleForm.value.price)).toFixed(2)
}

const onTax = () => {
    ruleForm.value.tax_price = (parseInt(ruleForm.value.tax_rate) / 100 *  parseInt(ruleForm.value.price)).toFixed(2)
}

const getA = () => {
    http.get('/A').then((response:any)=>{
        if(response.data.data){
            ruleForm.value.name = response.data.data.name
            ruleForm.value.tax_id = response.data.data.tax_id
            ruleForm.value.address = response.data.data.address
            ruleForm.value.mobile = response.data.data.mobile
            ruleForm.value.bank_number = response.data.data.bank_number
            ruleForm.value.bank_account = response.data.data.bank_account
            ruleForm.value.bank = response.data.data.bank
            ruleForm.value.email = response.data.data.email
            ruleForm.value.postal_code = response.data.data.postal_code
        }
    })
}

onMounted(()=>{
    getData()
    getA()
})

const onUploadFile = (type:string) => {
    uploadData.value.type = type
    if(type == 'b_business_file'){
        uploadData.value.image = ruleForm.value.b_business_file
    }
    if(type == 'b_idcard_file'){
        uploadData.value.image = ruleForm.value.b_idcard_file
    }
    if(type == 'b_authorize_file'){
        uploadData.value.image = ruleForm.value.b_authorize_file
    }
    if(type == 'b_agent_idcard_file'){
        uploadData.value.image = ruleForm.value.b_agent_idcard_file
    }
    if(type == 'contract_canned'){
        uploadData.value.image = ruleForm.value.contract_canned
    }
    
    
    uploadData.value.id = id.value
    showUpload.value = true
}

const saveUpload = (data:string) => {
    if(uploadData.value.type == 'b_business_file'){
        ruleForm.value.b_business_file = data
    }
    if(uploadData.value.type == 'b_idcard_file'){
        ruleForm.value.b_idcard_file = data
    }
    if(uploadData.value.type == 'b_authorize_file'){
        ruleForm.value.b_authorize_file = data
    }
    if(uploadData.value.type == 'b_agent_idcard_file'){
        ruleForm.value.b_agent_idcard_file = data
    }
    if(uploadData.value.type == 'contract_canned'){
        ruleForm.value.contract_canned = data
    }
    
    showUpload.value = false
}

const onShowFile = (file:string) => {
    if(!file){
        ElMessage.error('未上传文件');return
    }
    files.value = file
    isShowFile.value = true
}

const onCloseFile = () => {
    files.value = ''
}

</script>
<style scoped>
.contract{height: calc(100vh - 25vh);overflow-y: scroll;}
.b_ .el-input{width: 340px;}
</style>
